<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { imageBaseURL } from '@/utils/request'
import LayoutHeader from '@/views/Layout/components/LayoutHeader.vue'
import LayoutFooter from '@/views/Layout/components/LayoutFooter.vue'
import { getCategoryAPI } from '@/apis/layout'
const route = useRoute()
const searchResults = ref([])

const updateSearchResults = () => {
  if (route.query.results) {
    try {
      searchResults.value = JSON.parse(route.query.results)
    } catch (error) {
      console.error('解析搜索结果失败:', error)
    }
  }
}

onMounted(() => {
  updateSearchResults(),
  getCategoryAPI()
})

// 监听路由参数变化
watch(
  () => route.query.results,
  () => {
    updateSearchResults()
  }
)
</script>

<template>
  <div class="search-results-page">
    <LayoutHeader />
    <h3 class="title">--商品列表--</h3>
    <div class="results-container">
      <RouterLink 
        v-for="item in searchResults" 
        :key="item.id" 
        :to="`/detail/${item.id}`"
        class="result-item"
      >
        <img :src="imageBaseURL + item.picture" alt="">
        <div class="item-info">
          <p class="name">{{ item.name }}</p>
          <p class="desc">{{ item.desc }}</p>
          <div class="price">
            <i>特卖价</i>
            ¥{{ item.price }}
          </div>

        </div>
      </RouterLink>
    </div>
    <LayoutFooter />
  </div>
</template>

<style scoped lang="scss">
// h3 {
//       flex: 1;
//       font-size: 32px;
//       font-weight: normal;
//       height: 35px;
//       line-height: 35px;
//       text-align: center;;
//       margin-bottom: 30px;

// }
h3 {
      flex: 1;
      font-size: 32px;
      font-weight: normal;
      height: 35px;
      line-height: 35px;
      text-align: center;;
      margin-bottom: 30px;
      padding-top: 23px;

}
.search-results-page {
  padding: 20px;
  width: 100%;
  margin: 0 auto;
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;

  // .title {
  //   font-size: 24px;
  //   margin: 20px 0 30px;
  //   color: #333;
  //   text-align: center;
  // }

  .results-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
    flex: 1;
    padding: 0 20px;
  }

  .result-item {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
    overflow: hidden;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      border-radius: 4px;
      margin-bottom: 15px;
    }

    .item-info {
      .name {
        font-size: 16px;
        color: #333;
        margin-bottom: 15px;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .price {
        margin: 15px 0;
        font: bold 18px "Arial";
        color: #f56c6c;

        i {
          display: inline-block;
          width: 45px;
          height: 15px;
          background-image: repeating-linear-gradient(90deg, #dc459f 0, #cc75d8 100%);
          color: #ffffff;
          font: 11px/15px "微软雅黑";
          text-align: center;
          border-radius: 7.5px;
          margin-right: 5px;
        }
      }

      .desc {
        font: 14px/16px "微软雅黑";
        color: #666;
        margin-top: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      // &::before {
      // content: '特卖';
      // position: absolute;
      // top: 10px;
      // right: -20px;
      // width: 80px;
      // height: 24px;
      // background: #f56c6c;
      // color: white;
      // text-align: center;
      // line-height: 24px;
      // transform: rotate(45deg);
      // font-size: 12px;
      // }
    }
  }
}</style>